$ -> 
  $(window).resize () -> $('.main, #map').height($(window).height() - 45 - 30)
  $(window).trigger('resize')
  $(document).foundation()

  svg = null
  pos = null
  $(".chart-header").draggable
    handle: 'div.caption'
    start: (e) ->
      svg = $(this).parent().find('.svg')
      $('#chart-overlay').show()
      pos = svg.position()
    drag: (a, b) ->
      svg.css({
        'top': pos.top + b.position.top - b.originalPosition.top, 
        'left': pos.left + b.position.left - b.originalPosition.left
      })
    stop: () ->
      $('#chart-overlay').hide()

  $(".mini-chart").mousedown (e) ->
    chart = $(this).closest('.mini-chart')
    header = chart.find('.chart-header')
    z = Math.max (~~$(a).css('z-index') for a in $('.mini-chart .chart-header'))...
    $('.mini-chart .chart-header').each () ->
      if this == header[0]
        header.css('z-index', z + 2)
        chart.find('.svg').css('z-index', z + 1)

  $('#frq-input').click (e) -> this.select()

  $('.slider').change (e) ->
    v = $(this).val()
    $(this).closest('.sim-btn').find('.slider-value').text(v)

  new RuS.SIM()

  $('input.chart-switch').change (e) -> 
    el = $(this)
    chart = $('.' + el.attr('name'))
    if el.is(':checked') then chart.fadeIn(200) else chart.fadeOut(200)

  $('input[name=switch-ml]').change (e) ->
    if $(this).is(':checked')
      addFeature()
      ramonVM.ml.state('ON')
    else
      removeFeature()
      ramonVM.ml.state('OFF')

  $('.gps-pos').click (e) -> $(this).trigger 'center-map'
  $('.audio-play').click (e) -> $(this).trigger 'audio-play'
  $('.audio-record').click (e) -> $(this).trigger 'audio-record'
  $('.df-record').click (e) -> $(this).trigger 'df-record'
  $(document).on 'audio-play', () ->
    el = $('.audio-play')
    se = $('.sim-btn[sim-data="cmd:audio-play"] i')
    if el.hasClass('icon-play')
      el.removeClass('icon-play').addClass('icon-pause')
      se.removeClass('icon-play').addClass('icon-pause')
    else 
      el.removeClass('icon-pause').addClass('icon-play')
      se.removeClass('icon-pause').addClass('icon-play')
  $(document).on 'audio-record', () ->
    el = $('.audio-record')
    se = $('.sim-btn[sim-data="cmd:audio-record"] i')
    if el.hasClass('icon-circle')
      el.removeClass('icon-circle').addClass('icon-pause css3-blink')
      se.removeClass('icon-circle').addClass('icon-pause css3-blink')
    else 
      el.removeClass('icon-pause css3-blink').addClass('icon-circle')
      se.removeClass('icon-pause css3-blink').addClass('icon-circle')
  $(document).on 'df-record', () ->
    el = $('.df-record')
    color = '#ddd'
    el.css({ color: '#f66', transition: '0s' })
    setTimeout((() -> el.css('color', color)), 100)
  $(document).on 'center-map', () ->
    centerMap()
  $(document).on 'center-map-ml', () ->
    centerMap({ ml: true })

  init_spectrum()
  init_polar()
  setup_topbar_btn()

  ko.applyBindings ramonVM

setup_topbar_btn = () ->
  for c in ['#header', '#footer']
    do (c) ->
      tb = $(c)
      tb.find('.has-dropdown').mouseleave (e) -> 
        tb.find('.dropdown').css('visibility', 'hidden')
      tb.find('.has-dropdown').mouseenter (e) ->
        $(this).find('.dropdown').css('visibility', 'visible')
      tb.find('.dropdown a').click (e) ->
        p = $(this).closest('.has-dropdown')
        p.find('.dropdown').css('visibility', 'hidden')
        name = _.last p.find('a > [data-bind]').attr('data-bind').split('.')
        value = $(this).text()

init_spectrum = () ->
  width = 360
  height = 130
  svg_elm = $('.rx-chart .svg').empty();
  svg = d3.select(svg_elm[0]).append('svg')
    .attr('width', width)
    .attr('height', height)
    .append('g');
  RuS.Spectrum svg, {
    width: width
    height: height
    device: ko.mapping.toJS(ramonVM.device)
    y_domain: [-30, 110]
    y_ticks: _.range(-30, 110, 30)
  }

init_polar = () ->
  width = 110
  height = 110
  svg_elm = $('.df-chart .svg').empty();
  svg = d3.select(svg_elm[0]).append('svg')
    .attr('width', width + 5)
    .attr('height', height)
    .append('g');
  polar = RuS.Polar svg, {
    x: 5
    y: 0
    width: width
    height: height
    pd_t: 0
    pd_r: 0
    pd_b: 0
    pd_l: 0
    padding: 0
    border_width: 4
    compass_radius: 0
  }
  $(document).on 'click', '.df-chart .svg circle, .df-chart .svg path, .df-chart .svg text', (e) ->
    polar.toggleCompass()
    polar.update({ Bearing: 50, DfCompassCorrected: 800 }, 'yellow');
  polar.update({ Bearing: 50, DfCompassCorrected: 800 }, 'yellow');
